<template>
  <div class="page">

    <div class="block" >
      <div class="tien-bar bg-white solid-bottom">
        <div class='action'>
          <span class='icon-title text-blue'></span>进度条形状
        </div>
      </div>
      <div class="padding bg-white">
        <div class="tien-progress ">
          <div class='bg-red' style="width:61.8%;">61.8%</div>
        </div>
        <div class="tien-progress radius margin-top">
          <div class='bg-red' style="width:61.8%;">61.8%</div>
        </div>
        <div class="tien-progress round margin-top">
          <div class='bg-red' style="width:61.8%;">61.8%</div>
        </div>
      </div>
      <div class="tien-bar bg-white solid-bottom margin-top">
        <div class='action'>
          <span class='icon-title text-blue'></span>进度条尺寸
        </div>
      </div>
      <div class="padding bg-white">
        <div class="tien-progress round">
          <div class='bg-red' style="width:61.8%;"></div>
        </div>
        <div class="tien-progress round margin-top sm">
          <div class='bg-red' style="width:61.8%;"></div>
        </div>
        <div class="tien-progress round margin-top xs">
          <div class='bg-red' style="width:61.8%;"></div>
        </div>
      </div>

      <div class="tien-bar bg-white solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
        <div class='action'>
          <span class='icon-title text-blue'></span>进度条颜色
        </div>
        <div class='action'>
          <div class='padding-sm bg-red solid radius shadow-blur'></div>
        </div>
      </div>
      <div class="padding bg-grey">
        <div class="tien-progress round">
          <div class='bg-red' style="width:61.8%;"></div>
        </div>
      </div>


      <div class="tien-bar bg-white solid-bottom margin-top">
        <div class='action'>
          <span class='icon-title text-blue'></span>进度条条纹
        </div>
        <switch class='sm margin-right-sm' bindchange='SetActive'></switch>
      </div>
      <div class="padding bg-white">
        <div class="tien-progress round sm striped active">
          <div class='bg-green' style="width:60%;"></div>
        </div>
        <div class="tien-progress round sm margin-top-sm striped active">
          <div class='bg-black' style="width:40%;"></div>
        </div>
      </div>
      <div class="tien-bar bg-white solid-bottom margin-top">
        <div class='action'>
          <span class='icon-title text-blue'></span>进度条比例
        </div>
      </div>
      <div class="padding bg-white">
        <div class="tien-progress radius striped active">
          <div class='bg-red' style="width:30%;">30%</div>
          <div class='bg-olive' style="width:100%;">45%</div>
          <div class='bg-cyan' style="width:100%;">25%</div>
        </div>
      </div>
      <div class="tien-bar bg-white solid-bottom margin-top">
        <div class='action'>
          <span class='icon-title text-blue'></span>进度条布局
        </div>
      </div>
      <div class="padding bg-white ">
        <div class='flex'>
          <div class="tien-progress round">
            <div class='bg-green' style="width:100%;"></div>
          </div>
          <span class='icon-roundcheckfill text-green margin-left-sm'></span>
        </div>
        <div class='flex margin-top'>
          <div class="tien-progress round">
            <div class='bg-green' style="width:80%;"></div>
          </div>
          <span class='margin-left'>80%</span>
        </div>
      </div>


      
    </div>



  </div>
</template>

<script>
export default {
  name:'progress',
  data() {
    return {
      ColorList: [{
        title: '嫣红',
        name: 'red',
        color: '#e54d42'
      },
      {
        title: '桔橙',
        name: 'orange',
        color: '#f37b1d'
      },
      {
        title: '明黄',
        name: 'yellow',
        color: '#fbbd08'
      },
      {
        title: '橄榄',
        name: 'olive',
        color: '#8dc63f'
      },
      {
        title: '森绿',
        name: 'green',
        color: '#39b54a'
      },
      {
        title: '天青',
        name: 'cyan',
        color: '#1cbbb4'
      },
      {
        title: '海蓝',
        name: 'blue',
        color: '#0081ff'
      },
      {
        title: '姹紫',
        name: 'purple',
        color: '#6739b6'
      },
      {
        title: '木槿',
        name: 'mauve',
        color: '#9c26b0'
      },
      {
        title: '桃粉',
        name: 'pink',
        color: '#e03997'
      },
      {
        title: '棕褐',
        name: 'brown',
        color: '#a5673f'
      },
      {
        title: '玄灰',
        name: 'grey',
        color: '#8799a3'
      },
      {
        title: '草灰',
        name: 'gray',
        color: '#aaaaaa'
      },
      {
        title: '墨黑',
        name: 'black',
        color: '#333333'
      },
      {
        title: '雅白',
        name: 'white',
        color: '#ffffff'
      },
    ]
    };
  },
  mounted() {
    
  },
  methods: {
    
    
  },
};
</script>

